<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <div id="app">
        <ounisang></ounisang>
        <oudoudou></oudoudou>
    </div>

    <template id="ounisang">
        <p>我是哥哥，准备接受来自兄弟组件的值：{{message}}</p>
    </template>

    <template id="oudoudou">
        <p @click="send">我是弟弟，准备给哥哥传递数据</p>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        // 中央事件总线
        // var bus = new Vue();
        Vue.prototype.$bus = new Vue();

        var vm = new Vue({
            el: '#app',
            components: {
                ounisang: {
                    template: '#ounisang',
                    data() {
                        return {
                            message: ''
                        }
                    },
                    created() {
                        // 接受兄弟组件的事件
                        // bus.$on('sendtobrother', res => {
                        //     this.message = res
                        // })
                        this.$bus.$on('sendtobrother', res => {
                            this.message = res
                        })
                    }
                },
                oudoudou: {
                    template: '#oudoudou',
                    data() {
                        return {
                            msg: '尼桑，空你几哇'
                        }
                    },
                    methods: {
                        send() {
                            // bus.$emit('sendtobrother', this.msg)
                            this.$bus.$emit('sendtobrother', this.msg)
                        }
                    },
                }
            }
        })
    </script>
</body>
</html>